<template>
	<view  >
		<!-- :style="{'overflow':modelbox==true?'hidden':'','height':modelbox==true?'100vh':''}" -->
		<view class="bgbox">
			<view class="imgbox" @click="tomy()">
				<image src="../static/img.png"></image>
			</view>
			<view class="lucky-draw" :style="scale">
				<view class="lucky-draw__objects" :style="rotateStyle">
					<image src="http://wjdc.zxkjnc.com/images/aword.png" class="lucky-draw__objects__bg"></image>
					<view class="lucky-draw__objects__object" v-for="(item, index) in dataA" :key="index" :style="{
			          transform: `translate(-50%) rotate(${(360 / 6) * index}deg)`,
			        }">

						<view class="lucky-draw__objects__object__title">{{item.prize}}</view>
						<image class="lucky-draw__objects__object__icon" :src="item.img"></image>
					</view>
				</view>
				<image class="lucky-draw__start" src="../static/aword1.png" @click="getgift()"></image>
				<view class="lucky-draw__word"  @click="getgift()">{{prize_num}}次</view>
			</view>
			<view class="modelbox" v-if="modelbox">
				<view class="giftbox">
					<image class="hidemodel" src="../static/XX.png" @click="hidemodel()"></image>
					<!-- <view class="zutitle">恭喜你获得</view> -->
					<!-- <view class="wordtitle">三等奖</view> -->
					<view class="wordtitle">{{info.desc}}</view>
					<image :src="info.img"></image>
					<!-- <view class="buts" @click.stop="toaddress()" >
						填写手机号
					</view> -->
				</view>
			</view>
			<view class="down">
				<image src="http://wjdc.zxkjnc.com/images/aword1.png"></image>
				<view class="begin" @click="getgift()"></view>
			</view>
			<!-- <view  class="box_12" v-if="magstatus">
				<view class="rolebg" >
					<view class="closen" @click="magstatus=false">
						<image src="../static/closen1.png" mode="" class="image"></image>
					</view>
					<view class="titimg">
						<image src="../static/phone.png"></image>
					</view>
					<view class="inputbox">
						<input style="width: 80%;" placeholder="请填写微信手机号" v-model="mobile" type="number"/>
					</view>
					<view class="inputbox">
						<input placeholder="请输入验证码" maxlength="6" type="number" v-model="code" />
						<view class="codebox" @click="getcode()">发送验证码<text v-if="times!==0">（{{times}})</text></view>
					</view>
					<view class="surephone" @click="submitphone()">
						确定
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "lucky-draw",
		data() {
			return {
				dataA: [
				],
				isStart: false, //为了不连续点击//点击次数
				rotateAngle: 0, // 旋转角度
				cycle: 1, // 第几次抽奖
				dataB: [],
				svalue: '', //规则
				ida: '',
				info: {},
				modelbox: false, //获奖弹窗
				prize_num:"",//抽奖次数
				magstatus:false,//填写手机号
				mobile:'',//手机号
				code:'',//验证码
				times: 0,
				setTime: null,
				is_answer:'',
			};
		},
		computed: {
			rotateStyle() {
				return `
		        -webkit-transition: transform ${this.duration}ms ${this.mode};
		        transition: transform ${this.duration}ms ${this.mode};
		        -webkit-transform: rotate(${this.rotateAngle}deg);
		            transform: rotate(${this.rotateAngle}deg);`;
			},
			scale() {
				return `transform: scale(${this.size / 686})`;
			},
		},
		props: {
			duration: {
				// 总旋转时间 ms级
				type: Number,
				default: 5000,
			},
			circle: {
				// 旋转圈数
				type: Number,
				default: 5,
			},
			mode: {
				// 由快到慢 惯性效果都省了
				type: String,
				default: "cubic-bezier(0.2, 0, 0, 1)",
			},
			size: {
				type: Number,
				default: 686,
			},
			config: {
				type: Object,
				default: () => ({}),
			},
			type: {
				type: Number,
				default: 0,
			},
		},
		created() {
			this.getlist()
			// this.getrole()
			this.getmyinfo()
		},
		methods: {
			getmyinfo(){
				// uni.clearStorage()
				this.$http({
					url:'api/Answer/user_info',
					data:{
						// token:'15607060371',
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					this.prize_num = res.data.prize_num
					if(!res.data.mobile){
						this.magstatus = true
					}
					this.is_answer = res.data.is_answer//是否答题1否2是
					
				})
			},
			getlist() {
				this.$http({
					url: 'api/Answer/prize_list',
					data:{
						token:uni.getStorageSync('token')
					}
				}).then(res => {
					this.dataA = res.data
					// this.prize_num = res.data.prize_num
				})
			},
			tomy(){
				uni.reLaunch({
					url:'/pages/my/my'
				})
			},
			//规则
			getrole() {
				this.$http({
					url: 'api/api/act_role'
				}).then(res => {
					this.svalue = res.data.svalue
				})
			},
			//获取验证码
			getcode(){
				// console.log(123)
				if(!this.mobile){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(this.times>0){
					return
				}
				this.$http({
					url:'api/Answer/send_code',
					data:{
						mobile:this.mobile,
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					this.nums()
				})
			},
			nums() {
				if (this.times > 0 && this.setTime) {
					return
				}
				this.times = 60
				// this.numsbox = false
				this.setTime = setInterval(() => {
					this.times--;
					if (this.times <= 0) {
						// this.numsbox = true
						clearInterval(this.setTime);
					}
				}, 1000)
			},
			//提交号码
			submitphone(){
				if(!this.mobile||!this.code){
					uni.showToast({
						title:'请输入完整信息',
						icon:'none'
					})
					return
				}
				this.$http({
					url:'api/Answer/prize_bind_mobile',
					data:{
						mobile:this.mobile,
						token:uni.getStorageSync('token'),
						code:this.code
					}
				}).then(res=>{
					this.magstatus = false
				})
			},
			getgift() {
				console.log(this.isStart)
				// if()
				if(this.prize_num==0){
					uni.showToast({
								title: '暂无抽奖次数',
								icon: "none"
							})
					return
				}
				if (!this.isStart) {
					this.isStart = true;
					this.$http({
						url: 'api/Answer/get_gift',
						data:{
							token:uni.getStorageSync('token')
						}
					}).then(res => {
						this.ida = res.data.id
						this.info = res.data
						// if(this.info.type==2){
						// 	uni.setStorageSync('awordid', res.data.log_id);
						// }
						if (res.code == 0) {
							return;
						}
						// console.log(this.ida,'this.ida')
						this.starta()
					})

				} else {
					console.log(123)
					// uni.showToast({
					// 			title: '没有次数了',
					// 			icon: "none"
					// 		})
					return;
				}

			},
			starta() {
				
				this.isStart = true;
				// var ida = 3;
				// var ida = Math.ceil(Math.random()*10);
				//这里我是写的一个随机数。
				//当后台返回我所获得的奖项id，根据id和数组里的比较，相等则旋转到奖品角度
				this.ida = parseInt(this.ida)
				console.log(this.ida, 'this.ida', this.isStart)
				this.rotateAngle = (this.circle * 360 * this.cycle) - ((this.ida - 1) * 60)
				this.cycle++;
				this.getmyinfo()
				console.log(this.rotateAngle, 'rotateAngle')
				setTimeout(() => {
					this.dataB = this.dataA.filter(item => item.id == this.ida)
					console.log(this.dataB, 'dataB')
					// this.modelbox = true
					setTimeout(() => {
						this.modelbox = true
					}, 1000)
					// this.isStart ++;
					console.log(this.dataB[0].prize, 'dataB.prize', this.isStart)
					this.$emit("finish"); //向父组件发送结束事件
					// this.dataB = []
				
				}, 5000)
			},
			hidemodel(){
				this.modelbox = false
				this.isStart = false
				uni.reLaunch({
					url:'/pages/my/my'
				})
			},
			toaddress(){
				uni.navigateTo({
					url:'/pages/addressList/addressList'
				})
			}
		},
	}
</script>

<style>
	page{
		background: #2FACE2;
	}
</style>
<style lang="scss" scoped>
	.bgbox {
		width: 750rpx;
		height: 1400rpx;
		// background: url(https://matchs.app65.cn/static/img/foot_ss.png) no-repeat;
		background: url(http://wjdc.zxkjnc.com/images/bg1.png) no-repeat;
		background-size: 100% 100%;
		overflow-x: hidden;
		.imgbox{
			position: absolute;
			top: 30rpx;
			right: 0;
			z-index: 99;
			image{
				width: 68rpx;
				height: 198rpx;
			}
		}

		.bgimg {
			width: 100%;
			height: 386rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 636rpx;
				height: 318rpx;
			}
		}
	}

	.lucky-draw {
		position: relative;
		width: fit-content;
		z-index: 92;
		padding-top: 350rpx;
		// margin-top: 400rpx;
		.round {
			width: 683rpx;
			height: 683rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.lucky-draw__bg {
				width: 683rpx;
				height: 683rpx;
				display: block;
			}
		} 

		&__lights {
			position: absolute !important;
			width: 676rpx;
			left: 6rpx;
			top: 10rpx;
			display: block;
			animation: infinite 1s alternate lights steps(1, end);
		}

		&__objects {
			position: absolute;
			// top: 49rpx;
			left: 57rpx;
			// right: 63rpx;
			// bottom: 78rpx;
			// left:50%;
			// transform: translate(-50%,0);
			width: 636rpx;
			height: 636rpx;

			&__bg {
				position: absolute;
				width: 636rpx;
				height: 636rpx;
			}

			&__object {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
				transform-origin: 50% 318rpx;

				&__title {
					margin-top: 62rpx;
					color: #6a1f01;
					font-size: 30rpx;
					font-weight: bold;
					-webkit-transform: scale(0.7);
				}

				&__icon {
					width: 52rpx;
					height: 52rpx;
					display: block;
					margin: 18rpx auto 0 auto;
				}
			}
		}

		&__start {
			width: 150rpx;
			height: 170rpx;
			display: block;
			position: absolute;
			left: 300rpx;
			top: 562rpx;
		}
		&__word {
			width: 150rpx;
			height: 170rpx;
			display: block;
			position: absolute;
			left: 300rpx;
			text-align: center;
			// transform: translateX(-50%);
			top: 665rpx;
			z-index:99;
			color: #FFF;
			font-size: 26rpx;
		}
	}

	@keyframes lights {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(15deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	.modelbox {
		width:750rpx;
		height: 100%;
		background-color: rgba(#000, .5);
		overflow: hidden;
		// opacity: 0.6;
		position: fixed;
		top: 0;
		z-index: 99;
		.giftbox{
			border-radius: 20rpx;
			font-size: 45rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFF1D7;
			// background: linear-gradient(0deg, #FBF4E1 0%, #FFFFFF 100%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			width: 460rpx;
			margin: 500rpx auto 0 auto;
			text-align: center;
			// height: 347rpx;
			image {
				width: 257rpx;
				height: 159rpx;
				margin: 68rpx 0 40rpx 0;
			}
			.hidemodel{
				width: 46rpx;
				height: 46rpx;
				// float: right;
				margin-top:-80rpx ;
				position: absolute;
				right: 100rpx;
			}
			.wordtitle{
				font-size: 45rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFF1D7;
				text-align: center;
				background: linear-gradient(0deg, #FBF4E1 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.zutitle{
				margin-bottom: 10rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFF1D7;
				text-align: center;
				background: linear-gradient(0deg, #FBF4E1 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.buts{
				background: url(http://wjdc.zxkjnc.com/images/but2.png) no-repeat;
				background-size: 346rpx 84rpx;
				width: 346rpx;
				margin: 0 auto;
				height: 84rpx;
				text-align: center;
				line-height: 84rpx;
				color: #FFF;
				
			}
		}

		
	}

	.down {
		width: 651rpx;
		position: absolute;
		z-index: 22;
		top: 890rpx;
		right: 20rpx;

		image {
			width: 651rpx;
			height: 321rpx;
		}

		.begin {
			position: absolute;
			width: 240rpx;
			height: 100rpx;
			// background-color: #000000;
			top: 200rpx;
			left: 175rpx;
		}
	}

	.titleinfo {
		width: 300rpx;
		display: flex;
		margin: 900rpx auto 0 auto;
		align-items: center;
		justify-content: space-between;
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;

		image {
			width: 53rpx;
			height: 21rpx;
		}
	}

	.svalueinfo {
		width: 600rpx;
		margin: 30rpx auto 0 auto;
		// font-size: 30rpx;
		// font-family: Source Han Sans CN;
		// font-weight: 400;
		color: #FFFFFF;
		// padding-bottom: 20rpx;
	}
	.wordbox{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 99;
		top: 0;
	}
	.box_12{
		display: flex;
		width: 750rpx;
		height: 100vh;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 199;
		.rolebg{
			width: 526rpx;
			height: 624rpx;
			border-radius: 20rpx;
			// background-color: #FFF;
			position: relative;
			// padding-bottom: 50rpx;
			// position: relative;
			background-image: url(http://wjdc.zxkjnc.com/images/hllhp2.png);
			background-size: 526rpx 624rpx;
			.closen{
				position: absolute;
				text-align: right;
				width: 500rpx;
				margin-top: 25rpx;
				display: flex;
				justify-content: flex-end;
				z-index: 299;
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.titimg{
				text-align: center;
				margin: 32rpx 0 27rpx 0;
				image{
					width: 246rpx;
					height: 102rpx;
				}
			}
			.inputbox{
				width: 430rpx;
				height: 98rpx;
				background: #FFF;
				border-radius: 10rpx;
				margin: 10rpx auto 26rpx auto;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				>input{
					width: 50%;
					height: 98rpx;
				}
				.codebox{
					width: 50%;
					height: 60rpx;
					background: #222222;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
				}
			}
			.surephone{
				background-image: url(http://wjdc.zxkjnc.com/images/but3.png);
				width: 467rpx;
				height: 89rpx;
				background-size: 467rpx 89rpx;
				margin: 60rpx auto;
				text-align: center;
				line-height: 89rpx;
				color: #FFF;
			}
		}
	}
</style>
